/* eslint-disable prettier/prettier */
import { editSQLManage } from '@/service/modules/integration-sqlmanage'
import {
  FormInst,
  NButton,
  NForm,
  NFormItem,
  NInput,
  NModal,
  NSpace,
  useMessage
} from 'naive-ui'
import { defineComponent, ref, watchEffect } from 'vue'
import styles from './modal-handle.module.scss'

const props = {
  propModal: {
    type: Boolean,
    default: true
  },
  SQLValue: {
    type: Object,
    default() {
      return {}
    }
  },
  itemData: {
    type: Object,
    default() {
      return {}
    }
  }
}

const edit = defineComponent({
  name: 'edit',
  props,
  emits: ['closeModal'],
  setup(props, { emit }) {
    const editForm = ref({})

    const message = useMessage()

    const editSubmit = function () {
      editFormRef.value?.validate((err) => {
        if (!err) {
          // @ts-ignore
          const bak = sessionStorage.getItem('sqlmanageEditData') ? JSON.parse(sessionStorage.getItem('sqlmanageEditData')) : {}
          const temp = {
            ...props.SQLValue,
            oldData: bak,
            newData: editForm.value
          }
          editSQLManage(temp)
            .then((res: any) => {
              message.success(res.msg ? res.msg : '编辑成功')
              emit('closeModal', true)
            })
            .catch((err: any) => {
              message.error(err.msg ? err.msg : '接口未知错误')
            })
        }
      })
    }

    const editFormRef = ref<FormInst | null>(null)

    const onCloseModal = function () {
      emit('closeModal', true)
    }

    const handleUpdateValue = function () {}

    watchEffect(() => {
      // @ts-ignore
      editForm.value = props.itemData
      const keys = Object.keys(props.itemData)
      const values = Object.values(props.itemData)
      keys.forEach((item, key)=>{
        // @ts-ignore
        editForm.value[item] = values[key]
      })
    })

    return {
      editForm,
      editSubmit,
      editFormRef,
      message,
      onCloseModal,
      handleUpdateValue
    }
  },
  render() {
    return (
      <NSpace vertical>
        <NModal
          v-model:show={this.$props.propModal}
          preset='card'
          class={styles['modal-sqlmanage']}
          title='编辑'
          size='huge'
          bordered={false}
          on-close={this.onCloseModal}
        >
          <NForm
            model={this.editForm}
            ref='editFormRef'
          >
            { Object.keys(this.editForm).map((item: any) => {
              return <NFormItem
                label={item}
                path={item}
              >
                <NInput
                  // @ts-ignore
                  v-model:value={ this.editForm[item] }
                  placeholder={'请输入' + item}
                ></NInput>
              </NFormItem>
            }) }
            <NFormItem>
              <NButton onClick={this.editSubmit}>提交</NButton>
            </NFormItem>
          </NForm>
        </NModal>
      </NSpace>
    )
  }
})

export default edit
